<template>
  <div class="page">
    <OtherHeader pageTitle="通知公告"></OtherHeader>
    <div class="contain_wrap wrapper">
      <div class="content">
        <li class="news_item" v-for="(item,index) in newsData" :key="item.id+'_'+index">
          <span @click="intoDetail(item.id,item.name)"><span class="row_flag">●</span>{{ item.name }}</span>
        </li>
        <van-loading class="mar_top1" v-if="!loadStatus" size="24px" color="#deae76">加载中...</van-loading>
      </div>
    </div>
  </div>
</template>

<script>
import OtherHeader from "@/components/OtherHeader";
import BScroll from "better-scroll";
import axios from "axios";

export default {
  name: 'ZWT',
  data() {
    return {
      newsData: [
      ],
      loadStatus:true
    }
  },
  mounted() {
    this.$nextTick(() => {
      var scrollCom=new BScroll(document.querySelector(".wrapper"), {
        probeType: 3,
        click: true,
        pullUpLoad: true
      });
      scrollCom.on('scroll', (pos) => {
        // 下拉分段加载
        if (pos.y < 50 && this.loadStatus) {
          console.log("loading more...")
          this.loadStatus = false
        }
      })
    })
  },
  created() {
    this.getNotice()
  },
  methods: {
    intoDetail(id,tit){
      this.$router.push({
        path: '/noticedetail',
        query: {
          id:id,
          title:tit
        }
      })
    },
    getNotice() {
      const url = "http://8.155.49.183/api/tfxq/findVideoList";
      axios.get(url, {}, {
        headers: {
          'Content-Type': 'multipart/form-data' // 不需要设置Content-Type，axios会自动设置，但如果需要自定义，可以添加此行。默认情况下不需要设置。
        }
      }).then(response => {
        if (response.data.data.length > 0) {
          this.newsData = response.data.data.slice(0, 3);
        } else {
          this.newsData = []
        }
      }).catch(error => {
        console.log("notice data error!", error)
        this.$toast('获取公告数据错误！');
        this.newsData = []
      });
    },
  },
  components: {OtherHeader}
}
</script>

<style lang="scss" scoped>
.contain_wrap {
  width: 100vw;
  height: 100vh;
  margin-top: 3.34rem;
  text-align: center;
  overflow: hidden;

  .content {
    width: 100%;
    padding-bottom: 6.68rem;
    .news_item {
      width: 92%;
      height: 3.85rem;
      margin:0 auto;
      line-height: 3.85rem;
      text-align: left;
      overflow: hidden;
      font-size: $mText;
      color: $tColor;
      white-space: nowrap;
      text-overflow: ellipsis;
      border-bottom:1px dotted $sColor;
      .row_flag {
        display: inline-block;
        height: 1.28rem;
        line-height: 1.44rem;
        padding: 0 0.26rem;
        margin-right: 0.26rem;
        color: $mColor;
        font-size: $sText;
      }
    }
  }
}
</style>
